<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="webjars/layui/2.3.0/css/layui.css">
</head>
<script src="webjars/layui/2.3.0/layui.js"></script>

<body style="text-align:center">
<table  id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn" lay-event="show">查看数据</a>



</script>
<script>
    layui.use(['table','jquery'],function(){
        var table = layui.table;
        var $ = layui.jquery;
        table.render({
            elem:'#demo',
            height: 312,
            url: 'getAllUer' //数据接口
            ,cols: [
                [ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名', width:80,edit: 'text'}
                ,{ toolbar: '#barDemo'}
            ]
            ]
        })

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'delUseriById?id='+data.id,
                        success:function(data){
                            if(data == 1){
                                alert("删除成功")
                            }else{
                                alert("删除失败")
                            }

                        }
                    })

                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
               var data =  JSON.stringify(obj.data);
               $.ajax({
                   url:'updateStudent',
                   method:'post',
                   data:data,
                   dataType:'json',
                   contentType:'application/json;charset=utf-8',
                   success:function(data){
                      console.log(data)
                   }
               })

                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            } else if(obj.event === 'show'){
                console.log(obj)
            }
        });




    })




</script>
</body>
</html>